<template>
  <div class="resource">
    <div class="resource_title">
      <h1>本月每日家庭与环境健康监测</h1>
    </div>
    <div class="function-container-back" v-on:click="backToPreviousPage">
      <img src="../../assets/images/house/return.png" alt="Return Icon" class="back-icon">
    </div>
    <el-row class="resource-top">
      <el-col :span="12">
        <div  id="lineChart" style="width: 100%; height: 350px;"></div>
      </el-col>
      <el-col :span="12">
        <div  id="electricLineChart" style="width: 100%; height: 350px;"></div>
      </el-col>
    </el-row>
    <div class="resource-bot">
      <div  id="gasLineChart" style="width: 100%; height: 350px;"></div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      chart: null
    }
  },
  watch: {

  },
  mounted() {
    this.initChart()
    this.electricLineChart()
    this.gasLineChart()
  },

  methods: {
    generateRandomData() {
      let data = [];
      for (let i = 0; i < 30; i++) {
        data.push(Math.floor(Math.random() * (70 - 30 + 1) ));
      }
      return data;
    },

    otherRandomData() {
      let data = [];
      for (let i = 0; i < 30; i++) {
        data.push(Math.floor(Math.random() * (35 - 10 + 1) ));
      }
      return data;
    },

    gasRandomData() {
      let data = [];
      for (let i = 0; i < 30; i++) {
        data.push(Math.floor(Math.random() * (100 - 0 + 1) + 0));
      }
      return data;
    },
    backToPreviousPage() {
      this.$router.go(-1); // 返回上一页
    },
    initChart(){
      let kitchenData = this.generateRandomData();
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('lineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日湿度'
        },
        tooltip: {},
        legend: {
          data: ['湿度']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '用水量（单位：%RH）'
        },
        series: [

          {
            name: '湿度',
            type: 'bar',
            data:  kitchenData
          }

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    electricLineChart(){
      let kitchenData = this.otherRandomData();

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('electricLineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日温度'
        },
        tooltip: {},
        legend: {
          data: ['温度']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '用电量（单位：℃）'
        },
        series: [

          {
            name: '温度',
            type: 'line',
            data:  kitchenData
          }

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    gasLineChart(){
      let kitchenData = this.gasRandomData();

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('gasLineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日空气质量'
        },
        tooltip: {},
        legend: {
          data: ['空气质量']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '空气质量（AQI）'
        },
        series: [

          {
            name: '空气质量',
            type: 'line',
            data:  kitchenData
          },

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

  }
}
</script>

<style scoped>
.resource{
  height: 100%;
}
.resource-top{
  height: 40%;
  margin-left: 200px;
  margin-top: 100px;
/deep/ #lineChart{
  background: white;
}
/deep/ #electricLineChart{
  background: white;
}
}
.resource-bot{
  height: 40%;
  margin-left: 200px;
  margin-top: 80px;
   #gasLineChart{
  background: white !important;
}

}


.function-container-back{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  font-size: 18px; /* Slightly larger font size */
  color: white;
  cursor: pointer;
}
.resource_title
{
  position: absolute;
  top: -59px;
  left: 768px;
  color: white;
  height: 25px;
}
</style>
